<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,  initial-scale=1.0">
<title>我的文章</title>
<script type="text/javascript"  src="/resource/js/jquery-3.2.1.js"></script>
<script type="text/javascript"  src="/resource/js/bootstrap.js"></script>
<link rel="stylesheet" href="/resource/css/bootstrap.css">
<style type="text/css">
/* 限制文章详情中图片的大小，最大宽度为400px */
img {
     max-width:400px;
}
</style>
</head>
<body>
	
	<div class="container">
           
           <ul class="list-unstyled">
                <c:forEach items="${info.list}" var="article">
                      <li class="media">
                           <!-- 文章标题图片 -->
                           <div class="col-md-2">
                                 <img src="${article.picture}"  height="100" width="100">
                           </div>
                           
                           <!-- 文章名称 -->
                           <div class="col-md-10">          
                                 <span ><h5><b>${article.title  }</b></h5></span>
                                 ${article.displayTime }
                                 <button type="button"  onclick="detail(${article.id})" class="btn btn-primary"  data-toggle="modal" data-target="#exampleModal" >详情</button>
                           </div>     
                      </li>
                      <hr>
                </c:forEach>
           </ul>
           <!-- 加载分页页面 -->
           <jsp:include  page="/WEB-INF/view/common/pages.jsp"></jsp:include>
           
     </div>
     
     <!-- 文章详情的模态框 -->
     <div class="modal fade" id="exampleModal" tabindex="-1"  role="dialog" aria-labelledby="exampleModalLabel"  aria-hidden="true">
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="exampleModalLabel">
             	<!-- 内嵌.html的文件 -->
             </h5>
             <button type="button" class="close"  data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
           <div class="modal-body" id="content">
                <!-- 内嵌.html的文件 -->
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary"  data-dismiss="modal">关闭</button>
           </div>
         </div>
       </div>
     </div>
	

</body>

<script type="text/javascript">
//查询文章详情
function detail(id){
      //使用ajax查询数据
      $.post(
           "${pageContext.request.contextPath }/my/detail",
           {id:id},
           function(article){
                 //展示数据
                 //设置标题
                 $("#exampleModalLabel").html(article.title);
                 
                 //设置内容
                 $("#content").html(article.content);
           }
      )
}

//分页
function goPage(pageNum){
      
      //location="/my/articles?pageNum="+pageNum;
      //整合个人中心首页以后
      $("#center").load("${pageContext.request.contextPath }/my/articles?pageNum="+pageNum);
}
</script>

</html>